<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">交易对</span>
    <mat-button-toggle-group [value]="filterForm['concerned']? 'concerned':'all'"
                             (change)="concernedGroupChanged($event)">
      <mat-button-toggle value="concerned">
        <mat-icon class="favorite">star</mat-icon>
        关注
      </mat-button-toggle>
      <mat-button-toggle value="all">全部</mat-button-toggle>
    </mat-button-toggle-group>
    <span class="spacer"></span>
    <!--<button mat-stroked-button color="primary" (click)="editNew()">
      <mat-icon>add_circle_outline</mat-icon>
      New
    </button>-->
    <button class="flex-button" mat-stroked-button color="primary" (click)="syncPairs()"
            [disabled]="processes.syncPairs">
      <mat-icon>sync</mat-icon>
      同步
    </button>

    <button mat-button [matMenuTriggerFor]="syncActions">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #syncActions="matMenu">
      <button mat-menu-item (click)="syncPairsFor(ex.code)" [disabled]="processes.syncPairs"
              *ngFor="let ex of $exchs | async">
        <mat-icon>sync</mat-icon>
        同步（{{ex.name}}）
      </button>
    </mat-menu>
  </mat-toolbar>

  <div class="table-filter-form">

    <mat-label>交易所</mat-label>
    &nbsp;
    <mat-button-toggle-group class="ex-toggle-group" [(ngModel)]="filterForm['ex']">
      <mat-button-toggle value="">全部</mat-button-toggle>
      <mat-button-toggle [value]="ex.code" *ngFor="let ex of $exchs | async">
        {{ex.name}}
      </mat-button-toggle>
    </mat-button-toggle-group>

    <mat-form-field>
      <input matInput placeholder="基础币种" name="baseCcy" [(ngModel)]="filterForm['baseCcy']"
             (keyup.enter)="filter()">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="报价币种" name="quoteCcy" [(ngModel)]="filterForm['quoteCcy']"
             [matAutocomplete]="quoteCcyAuto" (keyup.enter)="filter()">
      <mat-autocomplete #quoteCcyAuto="matAutocomplete">
        <mat-option *ngFor="let option of quoteCcyOptions" [value]="option">
          <span class="ccy-logo-code">
            <img class="ccy-logo" [src]="CoinLogoPath(option)" alt="">
            <span class="ccy-code">{{option}}</span>
          </span>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

    <button mat-button (click)="filter()">
      <mat-icon>search</mat-icon>
      筛选
    </button>
    <button mat-button (click)="resetFilter()">
      <mat-icon>block</mat-icon>
      全部
    </button>
  </div>

  <table mat-table class="full-width" matSort>

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1 + (paginator ? paginator.pageIndex * paginator.pageSize : 0)}}
      </td>
    </ng-container>

    <ng-container matColumnDef="concerned">
      <th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">
        <mat-icon>star_outline</mat-icon>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="clickable" [class.favorite]="row.concerned" (click)="toggleConcern(row)">
          {{row.concerned ? 'star' : 'star_outline'}}</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="baseCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>基础币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <span class="ccy-logo-code clickable" (click)="showBaseCcyInfo(row)">
          <img class="ccy-logo" [src]="CoinLogoPath(row.baseCcy)" alt="">
          <span class="ccy-code">{{row.baseCcy}}</span>
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>报价币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.quoteCcy)" alt="">
        <div class="ccy-code">{{row.quoteCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="oeSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>OE Symbol</th>
      <td mat-cell *matCellDef="let row">
        {{row.oeSymbol}}
      </td>
    </ng-container>

    <ng-container matColumnDef="baSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>BA Symbol</th>
      <td mat-cell *matCellDef="let row">
        {{row.baSymbol}}
      </td>
    </ng-container>

    <ng-container matColumnDef="hbSymbol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>HB Symbol</th>
      <td mat-cell *matCellDef="let row">
        {{row.hbSymbol}}
      </td>
    </ng-container>

    <ng-container matColumnDef="createdAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>初次同步</th>
      <td mat-cell *matCellDef="let row">{{row.createdAt | date:'y-MM-dd'}}</td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row" align="end">

        <button mat-button [matMenuTriggerFor]="klines">
          <mat-icon>more_vert</mat-icon>
          K 线
        </button>
        <mat-menu #klines="matMenu">
          <ng-container *ngFor="let exch of $exchs | async">
            <button mat-menu-item (click)="openKlineChart(row,exch.code)" *ngIf="row[exch.code+'Symbol']">
              <mat-icon>show_chart</mat-icon>
              {{exch.name}}
            </button>
          </ng-container>
        </mat-menu>

        <button mat-button [matMenuTriggerFor]="officialSites">
          <mat-icon>more_vert</mat-icon>
          官网
        </button>
        <mat-menu #officialSites="matMenu">
          <a mat-menu-item class="mat-icon-20" target="_blank" *ngIf="row.oeSymbol"
             href="https://www.okex.com/markets/spot-mark/{{row.baseCcy | lowercase}}-{{row.quoteCcy | lowercase}}">
            <mat-icon>show_chart</mat-icon>
            价格（OE）
          </a>
          <a mat-menu-item class="mat-icon-20" target="_blank" *ngIf="row.oeSymbol"
             href="https://www.okex.com/trade-spot/{{row.baseCcy | lowercase}}-{{row.quoteCcy | lowercase}}">
            <mat-icon>launch</mat-icon>
            交易（OE）
          </a>
          <a mat-menu-item class="mat-icon-20" target="_blank" *ngIf="row.baSymbol"
             href="https://www.binance.com/zh-CN/trade/{{row.baseCcy}}_{{row.quoteCcy}}?layout=pro&type=spot">
            <mat-icon>launch</mat-icon>
            交易（BA）
          </a>
          <a mat-menu-item class="mat-icon-20" target="_blank" *ngIf="row.hbSymbol"
             href="https://www.huobi.com/zh-cn/exchange/{{row.baseCcy | lowercase}}_{{row.quoteCcy | lowercase}}">
            <mat-icon>launch</mat-icon>
            交易（HB）
          </a>
        </mat-menu>

        <button mat-button [matMenuTriggerFor]="actions">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #actions="matMenu">
          <ng-container *ngFor="let exch of $exchs | async">
            <button mat-menu-item (click)="exchangeInfo(row,exch.code)" *ngIf="row[exch.code+'Symbol']">
              <mat-icon>gavel</mat-icon>
              参数（{{exch.name}}）
            </button>
          </ng-container>
          <ng-container *ngFor="let exch of $exchs | async">
            <button mat-menu-item (click)="openOrderForm(row,exch.code)" *ngIf="row[exch.code+'Symbol']">
              <mat-icon>shopping_cart</mat-icon>
              下单（{{exch.name}}）
            </button>
          </ng-container>
          <!--<button mat-menu-item (click)="edit(row)">
            <mat-icon>edit</mat-icon>
            修改
          </button>-->
          <!--<button mat-menu-item (click)="remove(row)">
            <mat-icon>remove_circle_outline</mat-icon>
            删除
          </button>-->
        </mat-menu>

      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator #paginator
                 [length]="dataSource?.total"
                 [pageIndex]="0"
                 [pageSize]="20"
                 [pageSizeOptions]="[10, 20, 50, 100]">
  </mat-paginator>

</div>
